<script setup lang="ts">
import { reactive, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";

import beforeOptImg from "@/assets/image/plan/before_optimize.png";
import optImg from "@/assets/image/plan/RouteOptimize.png";

const router = useRouter();
const percentage = ref(0);
const state = reactive({
  overlayShow: false,
  bgImg: beforeOptImg,
});
const text = ref("立即优化");
const optimized = ref(true);
const showProcess = ref(false);
const showImg = ref("/src/assets/image/plan/optimize.png");
onMounted(() => {
  state.overlayShow = true;
  setTimeout(() => {
    state.overlayShow = false;
  }, 200);
});
const cancel = () => {
  optimized.value = true;
  text.value = "立即优化";
  percentage.value = 0;
  showProcess.value = false;
  showImg.value = "/src/assets/image/plan/optimize.png";
};
const save = () => {
  router.push("/savePlan");
};
const anchors = [400];
const height = ref(anchors[0]);
const optimize = function () {
  text.value = "正在优化中...";
  showProcess.value = true;
  let interval = setInterval(() => {
    if (percentage.value < 100) {
      percentage.value++;
    } else {
      clearInterval(interval);
      optimized.value = false;
      showProcess.value = false;
      showImg.value = "/src/assets/image/plan/optimized.png";
      state.bgImg = optImg;
    }
  }, 20);
};
</script>

<template>
  <div class="bg-img">
    <img :src="state.bgImg" />
    <div
      class="navigateBack"
      @click="
        () => {
          router.go(-1);
        }
      "
    ></div>
    <div class="floating-panel">
      <img class="sm-img" :src="showImg" />
      <div style="position: absolute; bottom: 0; width: 100%">
        <van-progress
          v-if="showProcess"
          :percentage="percentage"
          pivot-text=""
          color="#1b8f5b"
          stroke-width="10"
        />
        <van-button
          v-if="optimized"
          type="primary"
          color="#00bf69"
          block
          @click="optimize"
          >{{ text }}</van-button
        >
        <template v-else>
          <div
            style="
              height: 30px;
              margin-bottom: 5px;
              background-color: lightgreen;
              color: darkgreen;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 16px;
            "
          >
            <div>优化后预计节省50分钟</div>
            <div><van-icon name="location-o" /></div>
          </div>
          <div
            style="display: flex; justify-content: space-between; width: 100%"
          >
            <van-button
              plain
              type="default"
              style="flex: 1; margin-right: 8px"
              @click="cancel"
              >取消</van-button
            >
            <van-button
              type="primary"
              color="#32CD32"
              style="flex: 1; margin-left: 8px"
              @click="save"
              >保存优化方案</van-button
            >
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.bg-img {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  color: #1b8f5b;
  img {
    width: 100%;
    height: 100%;
  }
  .sm-img {
    height: 400px;
  }
  .search {
    display: flex;
    justify-content: center;
    width: 100%;
    // z-index: 2;
    position: absolute;
    top: 26px;
  }
  .search_box {
    width: 95%;
  }
  .navigateBack {
    position: absolute;
    top: 29px;
    left: 12px;
    width: 40px;
    height: 50px;
    background-color: transparent;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.floating-panel {
  /* 根据需要添加样式，例如以下样式可以实现基础的悬浮面板效果 */
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
